<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>衡泰数据债市概览</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script>


    function getnews() {
        $.ajax({
            url: '../news',
            type: 'get',
            cache: false,
            success: function (json) {
                var newsStr = "";
                for (let i = 0; i < json.length; i++) {
                    let pubdatetime = json[i].PUBDATETIME;
                    let title = json[i].TITLE;
                    let s = pubdatetime.substring(10, pubdatetime.length);/*+"&nbsp;&nbsp;"+json[i].SITENAME+"*/
                    if (title.length > 32) {
                        newsStr += "<li><p>" + s + "&nbsp;" + title.substring(0, 32) + "</p></li><li><p>" + title.substring(32, title.length) + "</p></li>";

                    } else {
                        newsStr += "<li><p>" + s + "&nbsp;&nbsp;" + title + "</p></li>";
                    }
                }
                $("#news").html(newsStr);
                var html = $(".wrap ul").html()
                $(".wrap ul").append(html)
                var ls = $(".wrap li").length / 2 + 1
                i = 0
                ref = setInterval(function () {
                    i++
                    if (i == ls) {
                        i = 1
                        $(".wrap ul").css({
                            marginTop: 0
                        })
                        $(".wrap ul").animate({
                            marginTop: -'.52' * i + 'rem'
                        }, 1000)
                    }
                    $(".wrap ul").animate({
                        marginTop: -'.52' * i + 'rem'
                    }, 1000)


                }, 3400);
            }
        })
    }

    getnews();
    newsRef =setInterval(function () {
        getnews();
    }, 1000 * 60 * 5);
</script>
<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <div>
        <img src="images/xQuant1_mini.png">
        <h1>衡泰数据债市概览<!-- 衡泰资讯 --></h1>
    </div>
    <div class="weather">
        <!-- <img src="images/weather.png"><span>多云转小雨</span> --><span class="showTime"></span></div>
</div>
<div class="mainbox">
    <div>
        <li>
            <div class="boxall" style="height:3.2rem;">
                <div class="alltitle">新债发行</div>
                <div class="panel table-row">
                    <table class="table table-hover" id="table1">
                        <legend class="legend1">国债、政金债(数量2支，金额7000亿元)</legend>
                        <thead>
                        <tr>
                            <th>交易代码</th>
                            <th>证券简称</th>
                            <th>期限</th>
                            <th>发行额(亿)</th>
                            <th>发行日期</th>
                            <th>外部评级</th>
                            <th>外部评级机构</th>
                            <th>发行人</th>
                        </tr>
                        </thead>
                        <tbody id="table1_body">
                        <tr>
                            <td>*</td>
                            <td>100.67</td>
                            <td>3.5850</td>
                            <td>*</td>
                            <td>*</td>
                            <td>*</td>
                            <td>*</td>
                            <td>*</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel table-row">
                    <table class="table table-hover" id="table2">
                        <legend class="legend2">短融(数量2支,金额299.50亿元)</legend>
                        <thead>
                        <tr>
                            <th>交易代码</th>
                            <th>证券简称</th>
                            <th>期限</th>
                            <th>发行额(亿)</th>
                            <th>发行日期</th>
                            <th>外部评级</th>
                            <th>外部评级机构</th>
                            <th>发行人</th>
                        </tr>
                        </thead>
                        <tbody id="table2_body">
                        <tr>
                            <td>*</td>
                            <td>100.67</td>
                            <td>3.5850</td>
                            <td>*</td>
                            <td>*</td>
                            <td>*</td>
                            <td>*</td>
                            <td>*</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="panel-footer"></div>
                </div>


                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: 3.2rem;">
                <div class="alltitle">衡泰资讯</div>
                <div class="wrap">
                    <ul id="news">
                        <li>
                            <p>__________________________________</p>
                        </li>

                    </ul>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>

    </div>

    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">近一年国债发行量走势</div>
                <div style="width: 100%; height: 100%;" id="echarts1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">近一年同业存单发行量走势</div>
                <div style="width: 100%;height: 100%;" id="echarts2"></div>
                <div class="boxfoot"></div>
            </div>

        </li>
        <li>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">近一年政策银行债发行量走势</div>
                <div style="width: 100%;height: 100%;" id="echarts3"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">近一年短融中票发行量走势</div>
                <div style="width: 100%;height: 100%;" id="echarts4"></div>
                <div class="boxfoot"></div>
            </div>

        </li>

        <li>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">近一年地方政府债发行量走势</div>
                <div style="width: 100%;height: 100%;" id="echarts5"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">近一年公司债发行量走势</div>
                <div style="width: 100%;height: 100%;" id="echarts6"></div>
                <div class="boxfoot"></div>
            </div>

        </li>
    </ul>
</div>
<div class="back"></div>
<script language="JavaScript" src="js/js.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript">
    var t = null;
    var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    // var weeks = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = checkTime(dt.getHours()); //获取时
        var m = checkTime(dt.getMinutes()); //获取分
        var s = checkTime(dt.getSeconds()); //获取秒
        var wi = dt.getDay(); //获取星期
        t = setTimeout(time, 1000); //设定定时器，循环运行
        document.querySelector(".showTime").innerHTML =
            y +
            "." +
            mt +
            "." +
            day +
            "   <p>" +
            weeks[wi] +
            "</p>   " +
            h +
            ":" +
            m +
            ":" +
            s;
    }
    function checkTime(i)
    {
        if (i<10)
        {i="0" + i}
        return i
    }

    $(document).ready(function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
        myChart6.resize();
    })
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
        myChart6.resize();
    });
</script>
<script type="text/javascript">
    var echartList = [];

    function getOption(key) {
        var option;
        var colors = [

            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

        ];
        $.ajax({
            url: "../t?key=" + key,
            success: function (result) {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#FFFFFF'
                            },
                            textStyle:{
                                color: "#FFFFFF" // 文本颜色
                            }
                        }
                    },
                    legend: {
                        data: ['发行总金额', '发行支数'],
                        textStyle:{
                            color: "#FFFFFF" // 文本颜色
                        }

                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: {
                            color: "#FFFFFF" ,// 文本颜色
                            interval: 0,
                            rotate:40,
                            formatter:function(value)
                            {
                                return value.substring(2,4)+"-"+value.substring(5,value.length);
                            }
                        },
                        data: result[0],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '发行总金额/亿元',
                        min: 0,
                        color: "#FFFFFF",
                        axisLabel: {
                            formatter: '{value} ',
                            color: "#FFFFFF" // 文本颜色
                        }
                    },
                        {
                            type: 'value',
                            name: '发行支数',
                            axisLabel: {
                                formatter: '{value}',
                                color: "#FFFFFF" // 文本颜色
                            }
                        }
                    ],
                    series: [{
                        name: '发行总金额',
                        type: 'bar',
                        data: result[1],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: colors[key]},
                                {offset: 1, color: colors[key+1]}
                            ]
                        )
                    },
                        {
                            name: '发行支数',
                            type: 'line',
                            smooth:true,
                            yAxisIndex: 1,
                            data: result[2],
                            color: colors[key]
                        }
                    ]
                };
                switch (key) {
                    case 1:
                        myChart1.setOption(option);
                        break;
                    case 2:
                        myChart2.setOption(option);
                        break;
                    case 3:
                        myChart3.setOption(option);
                        break;
                    case 4:
                        myChart4.setOption(option);
                        break;
                    case 5:
                        myChart5.setOption(option);
                        break;
                    case 6:
                        myChart6.setOption(option);
                        break;
                }
            }
        })
        //return option;
    }

    function setAllChart() {
        getOption(1);
        getOption(2);
        getOption(3);
        getOption(4);
        getOption(5);
        getOption(6);
    }

    var myChart1 = echarts.init(document.getElementById('echarts1'));
    var myChart2 = echarts.init(document.getElementById('echarts2'));
    var myChart3 = echarts.init(document.getElementById('echarts3'));
    var myChart4 = echarts.init(document.getElementById('echarts4'));
    var myChart5 = echarts.init(document.getElementById('echarts5'));
    var myChart6 = echarts.init(document.getElementById('echarts6'));
    setAllChart();
    chartRef = setInterval(function () {
        setAllChart();
    }, 1000 * 3600*12);

</script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript">
    //先在table的最后增加一行，然后再把第一行中的数据填充到新增加的行中，最后再删除table的第一行
    function change(tabId,tableStrList) {
        let index = 0;
        changeRef = setInterval(function (){
            index++;
            if (index == tableStrList.length) {
                index = 0;
            }
            var table = $("#"+tabId);
            table.append(tableStrList[index]);//在table的最后增加一行,table.rows.length是表格的总行数
            var element = document.getElementById(tabId);
            if (element.rows.length > 2) {
                element.deleteRow(0);//删除table的第一行
            }
        },3000)
    };
    function tableInterval(type) {
        //表中数据
        $.ajax({
            url:"../selectBond/"+type,
            success:function (list) {
                var tableStrList =[];
                for (let i = 0; i < list.length; i++) {
                    tableStrList.push("<tr><td>"+list[i].I_CODE+"</td>" +
                        "<td>"+list[i].B_NAME+"</td>" +
                        "<td>"+list[i].B_TERM+"</td>" +
                        "<td>"+list[i].B_ISSUE_NUM+"</td>" +
                        "<td>"+list[i].B_ISSUE_DATE+"</td>" +
                        "<td>"+list[i].B_EXT_RATING+"</td>" +
                        "<td>"+list[i].B_EXT_RATING_INSTITUTION+"</td>" +
                        "<td>"+list[i].B_ISSUER+"</td>" +
                        "</tr>");
                }
                var tabId = "table"+ type + "_body";
                change(tabId,tableStrList);
                //执行表格change函数，删除第一行，最后增加一行，类似行滚动
            }
        })
        //表头
        let tabheadStr = "";
        $.ajax({
            url:"../tableHead/"+type,
            success:function (json) {
                if (type==1){
                    $(".legend"+ type).html("国债、政金债(数量"+json[0]+"支，金额"+json[1]+"亿元)");
                }else {
                    $(".legend"+ type).html("短融(数量"+json[0]+"支,金额"+json[1]+"亿元)");
                }
            }
        })
    };
    tableInterval(1);
    tableInterval(2);
    tableIntervalRef = setInterval("tableInterval(1);tableInterval(2);", 12*60*60*1000);//每隔2秒执行一次change函数，相当于table在向上滚动一样
</script>

</body>
</html>
